import main from "./index";
import { Gete, Newe } from "./utils";

export default class {
  CurrentIndex = -1; // markerIndex
  Dom: HTMLDivElement;
  
  constructor() {
    this.Dom = Gete("objList") as HTMLDivElement;
    this.Dom.onkeydown = ({ key }) => {
      if (key !== "Delete") return;
      
      const current = this.Dom.getElementsByClassName("objItemCurrent");
      if (!current.length) return;
      
      const markerIndex = parseInt(current[0].children[0].textContent);
      main.Marker.Remove(markerIndex);
    };
    
    const wrap = Gete("listWrap");
    const { children } = wrap.children[0];
    for (let i = 0; i < children.length; i += 1) {
      const label = children[i] as HTMLLabelElement;
      label.onclick = () => this.SwitchList(i);
    }
  }
  
  Add(markerIndex: number) {
    const markerItem = main.Marker.Data[markerIndex];
    const objItem = Newe({ para: { className: "objItem" } });
    const objIndex = Newe({
      textContent: markerIndex.toString(),
      para: { className: "objIndex" },
    });
    const objImg = Newe({
      type: "img",
      para: {
        className: "objImg",
        src: markerItem.dataUrl,
        onclick: () => this.SetCurrent(markerIndex),
      },
    });
    const objInfo = Newe({ para: { className: "objInfo" } });
    const objInput = Newe({ type: "input", para: {
      alt: markerIndex,
      type: "text",
      maxLength: 20,
      value: markerItem.name,
      onchange: (e: InputEvent) => this.rename(e),
      onkeydown: (e: KeyboardEvent) => {
        const { key, target } = e;
        if (key === "Enter" || key === "Escape")
          (target as HTMLInputElement).blur();
      },
    }});
    const textContent = "宽:" + markerItem.width + ",高:" + markerItem.height;
    const objSize = Newe({ textContent });
    objInfo.append(objInput, objSize);
    objItem.append(objIndex, objImg, objInfo);
    this.Dom.append(objItem);
  }
  
  Del(markerIndex: number) {
    const { children } = this.Dom;
    if (!children.length) return; // 不可能，绝对不可能！
    
    let objItem = children[markerIndex];
    if (objItem.className.indexOf("objItemCurrent") >= 0) {
      this.CurrentIndex = -1;
      main.Output.BoxHide(); // 隐藏选框
      main.Canvas.TestCanvas.hidden = true;
    }
    objItem.remove();
    
    // 重建索引
    for (let i = 0; i < children.length; i += 1) {
      objItem = children[i];
      objItem.children[0].textContent = i.toString();
      const objImg = objItem.children[1] as HTMLImageElement;
      objImg.onclick = () => this.SetCurrent(i);
      const objInput = objItem.children[2].children[0] as HTMLInputElement;
      objInput.alt = i.toString();
      if (objItem.className.indexOf("objItemCurrent") >= 0) {
        // 修正选框位置
        const markerItem = main.Marker.Data[i];
        const { width, height, output } = markerItem;
        const { left, top } = output;
        main.Output.BoxShow(left, top, width, height);
      }
    }
  }
  
  Clear() {
    this.CurrentIndex = -1;
    this.Dom.textContent = "";
    main.Output.BoxHide();
  }
  
  Update() {
    const { children } = this.Dom;
    if (!children.length) return;
    
    for (let i = 0; i < children.length; i += 1) {
      const objItem = children[i];
      const objImg = objItem.children[1] as HTMLImageElement;
      const objIndex = objItem.children[0];
      const markerIndex = parseInt(objIndex.textContent);
      const markerItem = main.Marker.Data[markerIndex];
      objImg.src = markerItem.dataUrl;
    }
  }
  
  SetCurrent(markerIndex: number) {
    const { children } = this.Dom;
    if (!children.length) return;
    
    const objItem = children[markerIndex];
    if (objItem.className.indexOf("objItemCurrent") >= 0) return; // 忽略重复点击
    
    this.CurrentIndex = markerIndex;
    const before = document.getElementsByClassName("objItemCurrent");
    if (before.length) before[0].className = "objItem"; // 恢复之前
    objItem.className = "objItem objItemCurrent"; // 设置当前
    
    const markerItem = main.Marker.Data[markerIndex];
    const { width, height, output, bmpData, rgbIndexData } = markerItem;
    const { left, top } = output;
    main.Output.BoxShow(left, top, width, height);
    main.Canvas.SetTestCanvas(bmpData, rgbIndexData);
  }
  
  private rename(e: InputEvent) {
    const input = e.target as HTMLInputElement;
    const markerIndex = parseInt(input.alt);
    const newName = input.value;
    
    if (main.Marker.IsDupName(newName, markerIndex)) {
      input.value = main.Marker.Data[markerIndex].name; // 恢复原名
      return;
    }
    
    main.Marker.Data[markerIndex].name = newName; // 执行改名
    input.blur(); // 移去输入框焦点
    main.Feedback.Update();
  }
  
  SwitchList(index: number) {
    const wrap = Gete("listWrap");
    const { children } = wrap.firstElementChild;
    const label = children[index];
    const { className } = label;
    if (className === "current") return; // 忽略重复点击
    
    const before = wrap.getElementsByClassName("current");
    if (before.length) before[0].removeAttribute("class");
    
    label.className = "current";
    
    // 切换列表
    const fileList = Gete("fileList");
    fileList.hidden = index === 0;
    this.Dom.hidden = index === 1;
  }
};
